<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-03-26 13:24
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <div v-if="isSelectedFormItem" key="formComps" style="overflow-x: hidden;padding: 5px;">
    <x-attrs-header
      url="https://www.antdv.com/components/table-cn/#Column"
      title="表格列"
      @change="searchChangeHandler"
    />
    <a-skeleton active :paragraph="{rows:10}" :loading="!formShow">
      <x-render-form
        ref="xRenderForm"
        v-if="formShow"
        v-model="formData"
        :form-options="activeFormOptions"
        @change="changeHandler"
      />
    </a-skeleton>
  </div>
  <div v-else key="formTip" class="form-item-placeholder">
    从左侧拖拽添加表单项并点选
  </div>
</template>

<script>
import { cloneDeep } from 'lodash'
import XAttrsHeader from '../../../../form/right/components/XDesignAttrsHeader'
import FormOptions from './options'

export default {
  name: 'XRenderTableColumnAttrs',
  inject: ['xDesignTable'],
  components: { XAttrsHeader },
  data() {
    return {
      formShow: true
    }
  },
  computed: {
    activeFormOptions: {
      get() {
        return cloneDeep(FormOptions)
      }
    },
    isSelectedFormItem: {
      get() {
        const { xDesignTable } = this
        return !!xDesignTable.currentOption
      }
    },
    formData: {
      get() {
        const { xDesignTable } = this
        return xDesignTable.currentOption
      },
      set(obj) {
        const { xDesignTable } = this
        const option = xDesignTable.currentOption
        const deep = cloneDeep(obj)
        for (const key of Object.keys(deep)) {
          this.$set(option, key, deep[key])
        }
      }
    }
  },
  watch: {
    'xDesignTable.currentId': {
      immediate:true,
      deep:true,
      handler() {
        this.$nextTick(() => {
          this.formShow = false
        })
        setTimeout(() => {
          this.$nextTick(() => {
            this.formShow = true
          })
        }, 500)
      }
    }
  },
  methods: {
    changeHandler({ prop, value }) {
      if (prop === 'value') {
        const { xDesignTable, formData } = this
        const key = formData.dataIndex
        const dataSource = xDesignTable.dataSource[0]
        dataSource[key] = value
        xDesignTable.dataSource.splice(0, 1, dataSource)
      }
    },
    searchChangeHandler(keyword) {
      const formOptions = cloneDeep(FormOptions)
      const showProps = []
      const hideProps = []
      for (const option of formOptions) {
        if (!option.formItem) {
          continue
        }
        const formItem = option.formItem
        if ((!!formItem.prop && formItem.prop.includes(keyword)) || (!!formItem.label && formItem.label.includes(keyword)) || (!!formItem.extra && formItem.extra.includes(keyword))) {
          showProps.push(formItem.prop)
        } else {
          hideProps.push(formItem.prop)
        }
      }
      this.$refs.xRenderForm.showComponents(...showProps)
      this.$refs.xRenderForm.hideComponents(...hideProps)
    }
  }
}
</script>
<style lang="css" scoped>
.form-item-placeholder {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  color: #409eff;
}
</style>
